<template>
	<view class="wanlshop-container">
		<view
			v-if="common.modulesData.homeModules.page"
			class="wanlshop-container__head"
			:style="{
				height: headHeight + 'px'
			}"
		>
			<view class="bg" :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }" >
				<view class="navigater flex align-center justify-between">
					<view class="search flex align-center">
						<view class="text-df text-bold wanl-gray-dark s-icon">
							<text class="wlIcon-sousuo1"></text>
						</view>
						<view class="search-form round">
							<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc" placeholder="搜索剧名" @confirm="onSearchInputConfirmed" @input="onSearchInputChanged" />
						</view>
						
					</view>
				</view>
				<view class="toolbar flex padding-lr-bj align-center">
					<scroll-view
						class="scroll"
						scroll-x
						scroll-with-animation
						:scroll-left="scrollLeft"
					>

						<view class="scroll__item" v-for="(item, index) in cateList" :key="item.id" :class="{ action: currentItemId === item.id }" @tap="handleSelect(item.id, index + 1)" >
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
				<view class="toolbar flex padding-lr-bj align-center">
					<scroll-view
						class="scroll"
						scroll-x
						scroll-with-animation
						:scroll-left="scrollLeft"
					>
						<view class="scroll__item tab" :class="{ action: currentItemId2 === 'recommend' }" @tap="handleSelect2('recommend', 0)" >
							推荐
						</view>
						<view class="scroll__item tab" :class="{ action: currentItemId2 === 'new' }" @tap="handleSelect2('new', 0)" >
							最新
						</view>
						<view class="scroll__item tab" :class="{ action: currentItemId2 === 'hot' }" @tap="handleSelect2('hot', 0)" >
							热门
						</view>
						<view class="scroll__item tab" :class="{ action: currentItemId2 === 'free' }" @tap="handleSelect2('free', 0)" >
							免费
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="geli"></view>
		<view class="top">
			<view class="left">
				<image :src="recommend.cover_url" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="t">
					<view class="title">{{recommend.name}}</view>
					<view class="jianjie">{{recommend.description}}</view>
				</view>
				<view class="btn" @tap="goMovie(recommend.id)">追剧</view>
			</view>
		</view>
		<view class="box">
			<view class="item" v-for="item in movieList" @tap="goMovie(item.id)">
				<view class="img">
					<image :src="item.cover_url" mode="aspectFill"></image>
					<view class="tips" v-if="item.type=='recommend'">推荐</view>
					<view class="tips" v-if="item.type=='new'">最新</view>
					<view class="tips" v-if="item.type=='hot'">热门</view>
					<view class="tips" v-if="item.type=='free'">免费</view>
				</view>
				<view class="title">{{item.name}}</view>
				<view class="jianjie">{{item.description}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
	components: {
	},
	computed: {
		...mapState(['common', 'user', 'update'])
	},
	data() {
		return {
			cateList:[
			],
			modalName: '',
			scrollAnimation: 300,
			headHeight: 75,
			windowHeight: 0,
			headTop: 0,
			currentItemId: '',
			currentItemId2: 'recommend',
			currentData: {},
			scrollLeft: 0,
			recommend:{
				id:0,
				cover_url:'',
				description:'',
				name:'',
			},
			movieList:[]
		};
	},
	onShow() {
		// #ifdef APP-PLUS
		plus.navigator.setFullscreen(false);
		// #endif
		// 计算页面尺寸
		let sys = this.$wanlshop.wanlsys();
		this.headTop = sys.top;
		this.headHeight = sys.height + uni.upx2px(60);
		this.windowHeight = sys.windowHeight;
		setTimeout(() => {
			uni.setNavigationBarColor({
				frontColor: this.$store.state.common.modulesData.homeModules.page
					? this.$store.state.common.modulesData.homeModules.page.style
							.navigationBarTextStyle
					: '',
				backgroundColor: this.$store.state.common.modulesData.homeModules.page
					? this.$store.state.common.modulesData.homeModules.page.style
							.navigationBarBackgroundColor
					: ''
			});
		}, 200);
	},
	onReady() {
		// 判断网络类型
		uni.getNetworkType({
			success: res => {
				if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
					this.$wanlshop.msg('当前使用非WIFI环境，请注意流量使用');
				} else if (res.networkType == 'none') {
					this.$wanlshop.msg('没有网络');
				}
			}
		});
	},
	onLoad(query) {
		// 判断是否小程序来源
		if(query.hasOwnProperty('scene')){
			let scene = decodeURIComponent(query.scene);
				scene = this.$wanlshop.getParam(scene);
			console.log('微信小程序：',scene);
		}
		this.getCateList();
		
	},
	methods: {
		...mapActions({
			download: 'update/download', // 立即下载
			ignore: 'update/ignore' // 忽略更新
		}),
		onSearchInputChanged(event) {
			let value = event.detail.value;
			
		},
		onSearchInputConfirmed(event) {
			let value = event.detail.value;
			if (!value) {
				uni.showModal({ title: '提示', content: '请输入内容。' });
				return;
			} else {
				
			}
		},
		// 选择Tag
		handleSelect(id, index) {
			this.currentItemId = id;
			this.scrollLeft = (index - 1) * 50;
			this.getRecommendMovie();
			this.getMovieList();
		},
		handleSelect2(id, index) {
			this.currentItemId2 = id;
			this.getRecommendMovie();
			this.getMovieList();
		},
		// 搜索
		handleSearch(text) {
			this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
		},
		//禁止父元素滑动 1.0.3升级
		moveHandle() {},
		async getCateList() {
			await uni.request({
				url: '/wanlshop/short/shortCategory',
				method: 'GET',
				// data: {
				// 	id: id
				// },
				success: res => {
					this.cateList = res.data.categoryModules;
					//第一个必须是精选短剧
					this.currentItemId = res.data.categoryModules[0].id
					this.getRecommendMovie();
					this.getMovieList();
				}
			});
		},
		goMovie(id){
			//先判断是否登录
			if (this.$store.state.user.isLogin) {
				this.$wanlshop.to(`/pages/movie/show?id=${id}`);
			}else{
				this.$wanlshop.to('/pages/user/auth/auth');
			}
			
		},
		async getMovieList() {
			await uni.request({
				url: '/wanlshop/short/shortList?categroy_id='+this.currentItemId+'&type='+this.currentItemId2+'&istop=0',
				method: 'GET',
				success: res => {
					
					this.movieList = res.data.data
				}
			});
		},
		async getRecommendMovie() {
			await uni.request({
				url: '/wanlshop/short/shortList?categroy_id='+this.currentItemId+'&type='+this.currentItemId2+'&istop=1',
				method: 'GET',
				success: res => {
					this.recommend = res.data.data[0]
				}
			});
		},
	}
};
</script>

<style lang="scss">

page{
	background-color: white;
	background-image: url(https://dcdn.cxycoder.com/img/moviebg.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.geli{
	height: 60rpx;
}
.box{
	width: 750rpx;
	padding: 25rpx;
	
	.item{
		float: left;
		width: 216rpx;
		margin-bottom: 30rpx;
		margin-right: 25rpx;
		.img{
			width: 216rpx;
			height: 280rpx;
			position: relative;
			 
			image{
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
			.tips{
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				width: 60rpx;
				height: 30rpx;
				background: linear-gradient( 90deg, #6FD4FF 0%, #36AEFF 53%, #0499FD 100%);
				color: white;
				font-size: 22rpx;
				text-align: center;
				line-height: 30rpx;
				border-radius: 0rpx 16rpx 0rpx 16rpx;
			}
		}
		.title{
			font-weight: 600;
			font-size: 28rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1; /* 定义文本的最大行数 */
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.jianjie{
			font-size: 24rpx;
			color: #787878;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; /* 定义文本的最大行数 */
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.item:nth-child(3n){
		margin-right: 0rpx;
	}
}
.top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 750rpx;
	padding: 25rpx;
	padding-bottom: 10rpx;
	.left{
		width: 280rpx;
		height: 360rpx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}
	.right{
		width: 400rpx;
		height: 360rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title{
			font-weight: 600;
			font-size: 32rpx;
		}
		.jianjie{
			font-size: 28rpx;
			color: #787878;
			margin-top: 10rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 6; /* 定义文本的最大行数 */
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.btn{
			width: 400rpx;
			height: 72rpx;
			background: #EDF4FE;
			text-align: center;
			line-height: 72rpx;
			border-radius: 60rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #0499FD;
		}
	}
}
.wanlshop-container {
	&__head {
		// position: fixed;
		// top: 0;
		// left: 0;
		// right: 0;
		// z-index: 999;
		background-size: 100% auto;
		background-repeat: no-repeat;
		.navigater {
			height: 86rpx;
			padding-left: 25rpx;
			padding-right: 25rpx;
			/* #ifdef MP */
			padding-right: 200rpx;
			/* #endif */
			.search {
				flex: 1;
				background-color: #fff;
				height: 80rpx;
				border: 5rpx solid #0499FD;
				margin-right: 10rpx;
				border-radius: 15rpx; 
				.s-icon{
					margin: 0 15rpx;
				}
				.line{
					width: 3rpx;
					height: 30rpx;
					background: url(https://dcdn.cxycoder.com/home/line.png);
					background-repeat: no-repeat;
					background-size: 100% auto;
				}
				.scan{
					width: 30rpx;
					height: 30rpx;
					background: url(https://dcdn.cxycoder.com/home/scan.png);
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin: 0 15rpx;
				}
				.icon {
					margin: 0 20rpx;
				}
				swiper {
					height: 100%;
					width: 60%;
					margin-right: 10rpx;
					swiper-item {
						display: flex;
						align-items: center;
					}
				}
			}
		}
		.toolbar {
			.scroll {
				flex: 1;
				white-space: nowrap;
				overflow: hidden;
				width: 100%;
				&__item {
					position: relative;
					z-index: 2;
					font-size: 28rpx;
					display: inline-flex;
					height: 58rpx;
					align-items: center;
					margin-right: 40rpx;
					color: #000000;
					&.action {
						position: relative;
						font-weight: bold;
						font-size: 30rpx;
						color: #0499FD;
						&::after {
							content: ' ';
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							height: 4rpx;
							width: 30rpx;
							border-radius: 6rpx;
							background-color: #0499FD;
						}
					}
				}
				.tab{
					font-size: 26rpx;
					&.action {
						font-size: 28rpx;
					}
				}
			}
			.category {
				box-shadow: #eee -16rpx 0 16rpx -16rpx;
				height: 58rpx;
				font-size: 28rpx;
				padding-left: 25rpx;
			}
		}
	}
	&__main {
		position: relative;
		z-index: 99;
	}
	.WANL-MODAL {
		.cu-modal {
			&.top-modal {
				background: rgba(0, 0, 0, 0.6);
				text-align: inherit;
				.cu-dialog {
					background: #fff;
					border-radius: 0 0 18rpx 18rpx;
					.category {
						display: grid;
						grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
						grid-auto-flow: row dense;
						grid-gap: 16rpx;
						.item {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 12rpx 0;
							border: 2rpx solid transparent;
							&.action {
								background-color: transparent;
								border-color: #0499FD;
								color: #0499FD;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
}
</style>
